<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>权限管理-列表</title>
<!-- 引入样式 -->
<link rel="stylesheet" type="text/css" href="/resources/zTree/css/metroStyle/metroStyle.css">
<link rel="stylesheet" href="/resources/css/public.css" media="all">
<link rel="stylesheet" href="/resources/zTree/plugin/css/index.css" media="all">
<link rel="stylesheet" href="/resources/layui/css/layui.css" media="all">
</head>
<body class="childrenBody">
	<!-- 搜索开始 -->
	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  		<legend>查询条件</legend>
	</fieldset>
	<form class="layui-form" action="" id="searchFrm">
		<div class="layui-form-item">
		    <div class="layui-inline">
		      <label class="layui-form-label">权限名称</label>
		      <div class="layui-input-inline">
		        <input type="text" name="name"  autocomplete="off" class="layui-input">
		      </div>
		    </div>
		    <div class="layui-inline">
		      <label class="layui-form-label">权限编码</label>
		      <div class="layui-input-inline">
		        <input type="text" name="percode"  autocomplete="off" class="layui-input">
		      </div>
		    </div>
		    <div class="layui-inline">
		     <button type="button" class="layui-btn" id="doSearch">查询</button>
		      <button type="reset" class="layui-btn layui-btn-primary" >重置</button>
		    </div>
	  </div>
	</form>
	<!-- 搜索结束-->
	
	<!-- 表格数据开始 -->
	<table class="layui-hide" id="permissionList" lay-filter="permissionList"></table>
	<div id="tableToolBar" style="display: none;">
		<button type="button" class="layui-btn" lay-event="add" shiro:hasPermission="permission:create">添加</button>
	</div>
	<div id="tableCellToolBar" style="display: none;">
		<button type="button" class="layui-btn layui-btn-sm  layui-btn-warm" lay-event="update" shiro:hasPermission="permission:update">修改</button>
		<button type="button" class="layui-btn layui-btn-sm  layui-btn-danger" lay-event="delete" shiro:hasPermission="permission:delete">删除</button>
	</div>
	<!-- 表格数据结束-->
	
	<!-- 添加。修改弹出层开始 -->
	<div id="dlg" style="display: none;margin: 10px">
		<form method="post" class="layui-form" id="dataFrm" lay-filter="dataFrm">
			 <div class="layui-form-item">
			    <div class="layui-inline">
			      <label class="layui-form-label">所属菜单</label>
			      <div class="layui-input-inline">
			      	<input type="hidden" name="id">
			      	<input type="hidden" name="type">
			      	<div id="pid"  name="pid" class="select-tree layui-form-select"></div>
			      </div>
			    </div>
			    <div class="layui-inline">
			      <label class="layui-form-label">排序码</label>
			      <div class="layui-input-inline">
			        <input type="number" id="ordernum" name="ordernum" lay-verify="required|number" autocomplete="off" class="layui-input">
			      </div>
			    </div>
			  </div>
			   <div class="layui-form-item">
			    <label class="layui-form-label">权限名称</label>
			    <div class="layui-input-block">
			      <input type="text" name="name" lay-verify="required" autocomplete="off" placeholder="请输入权限名称" class="layui-input">
			    </div>
			  </div>
			  <div class="layui-form-item">
			    <label class="layui-form-label">权限编码</label>
			    <div class="layui-input-block">
			      <input type="text" name="percode"  autocomplete="off" placeholder="请输入权限地址" class="layui-input">
			    </div>
			  </div>
			  <div class="layui-form-item">
			    <div class="layui-inline">
			      <label class="layui-form-label">是否可用</label>
			      <div class="layui-input-inline">
			      		<input type="hidden" name="open" value="0">
			      		<input type="hidden" name="parent" value="0">
			      		<input type="radio" name="available" value="1" title="是" checked="" >
      					<input type="radio" name="available" value="0" title="否" >
			      </div>
			    </div>
			  </div>
			   <div class="layui-form-item" style="text-align: center;">
			      <button class="layui-btn" lay-submit="" lay-filter="doSubmit">提交</button>
			      <button type="reset" class="layui-btn layui-btn-warm">重置</button>
			  </div>
		</form>
	</div>
	<!-- 添加。修改弹出层结束 -->
</body>
<script type="text/javascript" src="/resources/layui/layui.js"></script>
<script type="text/javascript" src="/resources/zTree/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="/resources/zTree/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="/resources/zTree/plugin/js/selectTree.js"></script>

<script type="text/javascript">
var tableIns;
layui.use([ 'layer', 'jquery', 'table', 'form' ], function() {
	var layer = layui.layer;
	var $ = layui.jquery;
	var table = layui.table;
	var form = layui.form;
	//渲染表格
	 tableIns = table.render({
		elem : '#permissionList', 
		url : '/permission/loadAllPermission', 
		cellMinWidth : 80, 
		page : true, 
		toolbar : '#tableToolBar',
		defaultToolbar : [ 'filter', 'print' ], 
		height:'430px',
		cols : [ [ 
			{ field : 'id', width : 80, title : 'ID', align : 'center'},
			{field : 'pid',width : 120,title : '所属菜单ID',align : 'center'}, 
			{field : 'name',width : 150,title : '权限名称',align : 'center'},
			{field : 'percode',width : 200,title : '权限编码',align : 'center'}, 
			{field : 'available',width : 100,align : 'center',title : '是否可用',templet:function(d){
				return d.available==1?'<font color=blue>是</font>':'<font color=red>否</font>'
			}}, 
			{field : 'ordernum',title : '排序码',align : 'center'},
			{width : 137,title : '操作',align : 'center',toolbar : "#tableCellToolBar",fixed : 'right',align : 'center'
		} ] ]
	});

	//刷新表格
	$("#doSearch").click(function() {
		var params=$("#searchFrm").serialize();
		tableIns.reload({
			url : '/permission/loadAllPermission?'+params
		});
	})
	
	//监听表头事件
	table.on('toolbar(permissionList)', function(obj){
	  var checkStatus = table.checkStatus(obj.config.id);
	  switch(obj.event){
	    case 'add':
	      openAdd();
	    break;
	  };
	});
	//监听行工具条
	table.on('tool(permissionList)', function(obj){ 
	  var data = obj.data; 
	  var layEvent = obj.event; 
	  if(layEvent === 'update'){ //更新
		  openUpdate(data);
	  } else if(layEvent === 'delete'){ //删除
	    layer.confirm('真的删除【'+data.name+'】这个权限么？', function(index){
	    	$.post("/permission/isCurrentPermissionHasChildrenNode?id="+data.id,function(obj){
	    		if(obj.code==200){
	    			$.post("/permission/deletePermission",{id:data.id},function(obj){
	    	    		if(obj.code==200){
	    	      			layer.close(index);
	    	      			//刷新表格
	    	      			tableIns.reload();
	    					//刷新左边的树
	    					window.parent.left.initTree();
	    	    		}
	    	    		layer.msg(obj.msg);
	    	    	})
	    		}else{
	    			layer.msg(obj.msg);
	    		}
	    	})
	    	
	    });
	  }
	});
	//打开添加的弹出层
	var url=""
	var mainIndex;//弹出层的索引
	 function openAdd(){
		 mainIndex=layer.open({
			title:'添加权限',
			type:1,
			area:['700px','500px'],
			content:$("#dlg"),
			success:function(layero, index){
				$("#dataFrm")[0].reset();
				//查询最大的排序码
				$.post("/permission/loadMaxOrderNumber",function(obj){
					$("#ordernum").val(obj);
				});
				url="/permission/addPermission";
			}
		});
	}
	//打开修改弹出层
	function openUpdate(data){
		 mainIndex=layer.open({
				title:'修改权限',
				type:1,
				area:['700px','500px'],
				content:$("#dlg"),
				success:function(layero, index){
					$("#dataFrm")[0].reset();
					//加载默认数据
					form.val('dataFrm',data);
					//选中父级权限ID
					selectDefaultPid(data.pid);
					url="/permission/updatePermission";
				}
			});
	}
	//做保存
	form.on("submit(doSubmit)",function(data){
		var params=$("#dataFrm").serialize();
		$.post(url,params,function(obj){
			if(obj.code==200){
				layer.msg(obj.msg);
				layer.close(mainIndex);
				//刷新表格
				tableIns.reload();
				//刷新左边的树
				window.parent.left.initTree();
			}else{
				layer.msg(obj.msg);
			}
		});
		return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
	})
});
//左边的树刷新表格
function reloadTable(id){
	tableIns.reload({
		url : '/permission/loadAllPermission?id='+id
	});
}
function initSelectTreeData(){
    $.post("/menu/loadMenuLeftTreeJson",function(zNodes){
    	initSelectTree("pid",zNodes,false)
        $(".layui-nav-item a").bind("click", function () {
            if (!$(this).parent().hasClass("layui-nav-itemed") && !$(this).parent().parent().hasClass("layui-nav-child")) {
                $(".layui-nav-tree").find(".layui-nav-itemed").removeClass("layui-nav-itemed")
            }
        })
    });
}
initSelectTreeData();
//修改选中默认值
function selectDefaultPid(pid){
	//根据pid去zTree里面找到pid的值等于传过来的值的这个节点
	var treeObj = $.fn.zTree.getZTreeObj("pidTree");
	var node = treeObj.getNodeByParam("id", pid, null);
	//alert(node.name);
	treeObj.selectNode(node);
	//调用selectTree.js里面的onClick方法重新渲染
	onClick(event,"pidTree",node);
} 
</script>
</html>
